<!DOCTYPE html>
<html manifest="http://aleonlinespot.altervista.org/manifest.php">
    <head>
        <meta charset="utf-8" />
        <title>MyPhotoMemories</title>

        <link rel="icon" href="img/favicons/icon32.png">
        <link rel="shortcut icon" href="img/favicons/icon32.png">
        <link rel="apple-touch-icon" href="img/favicons/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/favicons/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/favicons/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" sizes="80x80" href="img/favicons/icon80.png">
        <link rel="apple-touch-icon-precomposed" sizes="android-only" href="img/favicons/icon57.png">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <!-- jQuery mobile -->      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
        <!-- jQuery url plugin -->
        <script type="text/javascript" src="../jQuery/jquery.url.js"></script>
        <!-- Gmaps for reverse geocoding -->
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA8vPFux0WblXQfMbOpgEbDKWCGh0cEt58&sensor=true">
        </script>
        <!-- model -->
        <script src="../model/photo.js"></script>
        <script src="../model/album.js"></script>
        <!-- view -->
        <script type="text/javascript" src="draw.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <!-- controller -->
        <script src="../controller/dbController.js"></script>
        <script src="../controller/fileController.js"></script>
        <script src="../controller/locationController.js"></script>
        <script src="../controller/cacheController.js"></script>
        <script src="../controller/supportController.js"></script>
        <!-- init script -->
        <script src="initViews.js"></script>


        <!-- css -->
        <link rel="stylesheet" href="css/myStyle.css" />
        <link rel="stylesheet" href="css/graphics.css" />

    </head>
    <body>
        <div data-role="page" id="effectView">
            <!-- effects library -->
            <script type="text/javascript" src="../caman/caman.full.min.js"></script>
            <script type="text/javascript" src="effects.js"></script>

            <!-- init script -->
            <script>
                var e;
                var p;
                var appliedEffects;
                var origW, origH;
                                
                $("#effectView").bind('pageshow', function(){
                    console.log("effectView pageshow");
                    
                    $.mobile.showPageLoadingMsg("a", "Loading image...");

                    appliedEffects = new Array();
                    console.log(JSON.stringify(appliedEffects));
                    if (sessionStorage.appliedEffects && sessionStorage.appliedEffects != null && sessionStorage.appliedEffects != "null"){
                        console.log("appliedEffects non era null");
                        appliedEffects = JSON.parse(sessionStorage.appliedEffects);
                        sessionStorage.appliedEffects = null;
                    }
                    
                    var albumId = sessionStorage.aid;
                    var photoId = sessionStorage.pid;
                    
                    if (p != null){
                        var ts = cCon.getTimestamp(photoId);

                        //load previews
                        var pvm = document.getElementById("EVpreviewModel");
                        pvm.src = p.path+ts;
                        pvm.onload = function(){

                            loadImg(this, "invert");
                            loadImg(this, "sepia");
                            loadImg(this, "noise");
                            loadImg(this, "sharpen");
                            loadImg(this, "blur");
                            loadImg(this, "desaturate");
                            loadImg(this, "saturation");
                            loadImg(this, "brightness");

                            this.style.display='none';
                        }
                        //load result
                        var rem = document.getElementById("EVresultModel");
                        rem.src = p.path+ts;
                        rem.onload = function(){
                            loadImg(this, "EVresult");
                            this.style.display='none';
                            if (appliedEffects.length != 0){
                                var eh = new effectsHelper();
                                eh.applyEffects(appliedEffects, "EVresult", function(){
                                    console.log("rendered");
                                    updatePreviews();
                                });
                            }
                        }
                        
                        //load save
                        var ts = cCon.getTimestamp(photoId);
                        var img = new Image();
                        img.onload = function(){
                            origW = this.width;
                            origH = this.height;
                        
                            var cvs = document.getElementById("EVsaveCanvas");
                            cvs.width = this.width;
                            cvs.height = this.height;               
                            
                            // Copy the image contents to the canvas
                            var ctx = cvs.getContext("2d");
                            ctx.drawImage(this, 0, 0); 
                            cvs.style.display="none";
                            
                            var eh = new effectsHelper();
                            eh.applyEffects(appliedEffects, "EVsaveCanvas", function(){
                            });
                            
                            layoutEV();
                            
                            $.mobile.hidePageLoadingMsg();
                        }
                        img.src = p.path+ts; 
                    }
                    else{
                        console.log("p is null");
                    }        
                });
                
            </script>

            <div data-role="header">
                <div class="logo">
                    <img src="img/logo/logo.png" alt="MyPhotoMemories"/>
                    <div class="rightHeader">
                        <a href="index.html"  data-role="button" data-icon="home"  data-iconpos="notext"></a>
                    </div>
                </div> 
            </div>
            <div data-role="content" id="EVContent">
                <div id="EVeffectsTable">
                    <div>
                        <span class="ext"><canvas class="preview" id="invert" ></canvas><br/><span class="lab">Invert</span></span>
                        <span class="ext middleCol"><canvas class="preview" id="sepia" ></canvas><br/><span class="lab">Sepia</span></span>
                        <span class="ext"><canvas class="preview" id="noise" ></canvas><br/><span class="lab">Noise</span></span>
                    </div>
                    <div>
                        <span class="mid"><canvas class="preview" id="sharpen"></canvas><br/><span class="lab">Sharpen</span></span>
                        <span class="mid" id="EVcenter"><canvas id="EVresult"></canvas></span>
                        <span class="mid"><canvas class="preview" id="blur"></canvas><br/><span class="lab">Blur</span></span>
                    </div>
                    <div>
                        <span class="ext"><canvas class="preview" id="desaturate"></canvas><br/><span class="lab">Greyscale</span></span>
                        <span class="ext middleCol"><canvas class="preview" id="saturation"></canvas><br/><span class="lab">Saturation</span></span>
                        <span class="ext"><canvas class="preview" id="brightness"></canvas><br/><span class="lab">Brightness</span></span>
                    </div>
                </div> 
                <img id="EVpreviewModel" />
                <img id="EVresultModel" />
                <canvas id="EVsaveCanvas"></canvas>
            </div>
            <div data-role="footer" data-position="fixed">
                <a data-rel="back" data-role="button">Cancel</a>
                <a id="EVsaveButton" data-role="button">Save</a>
            </div>
        </div>  


    </body>
</html>

